<!-- 登陆页 -->
<template>
  <div class="login">
    <h2>时音</h2>
    <div class="tp">
      <img src="../../assets/image/logo2.png"
        alt="">
    </div>
    <form>
      <van-cell-group class="phone">
        <van-field type="number"
          v-model="userInfo.phone"
          label="手机号"
          placeholder="请输入手机号" />
      </van-cell-group>
      <van-cell-group class="password">
        <van-field type="password"
          v-model="userInfo.password"
          label="密码"
          placeholder="请输入密码" />
      </van-cell-group>
      <van-button @click="addLogin"
        size="large"
        type="primary">登陆
      </van-button>
    </form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import { $http } from '../../api/request'
export default {
  data () {
    return {
      userInfo: {
        phone: '',
        password: ''
      }
    }
  },
  mounted () {
  },
  methods: {
    async addLogin () {
      const phone = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/
      const password = /^[a-zA-Z]\w{5,17}$/
      const flag = phone.test(this.userInfo.phone) && password.test(this.userInfo.password)
      if (flag) {
        await this.$store.dispatch('getUserinfo', this.userInfo)
        if (!this.uaserInfo.userId) return this.$Notify({ type: 'warning', message: '手机号或者密码错误' })
        // 这里就是登陆成功的，数据中心有值
        // console.log('登陆成功，数据中心有值')
        window.localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
        this.$router.push('/home')
      } else {
        this.$Notify({ type: 'warning', message: '手机号或者密码错误' })
      }
    }
  },
  computed: {
    ...mapState(['uaserInfo'])
  }
}
</script>
<style lang="less" scoped>
.login {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #c6e4a3;
  > h2 {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
  }
  .tp {
    background: #000;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 10px 10px 10px #96cb5a;
    img {
      width: 80%;
      display: block;
    }
  }
  form {
    width: 100%;
    height: 300px;
    position: fixed;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .van-cell-group {
      border-radius: 8px;
      overflow: hidden;
    }
    .van-button {
      width: 60%;
      margin-top: 15px;
      background-color: #63ba03;
      height: 44px;
      border-radius: 115px;
      background: linear-gradient(145deg, #59a703, #6ac703);
      box-shadow: 26px 29px 52px #529a02, 8px 10px 14px #74da04;
    }
  }
}
.password {
  margin-top: 15px;
}
</style>
